        <!-- loads jquery and jquery ui -->
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
        <script type="text/javascript" src="js/jquery.ui.core.js"></script>
        <script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>


        <!-- loads mdp -->
        <script type="text/javascript" src="jquery-ui.multidatespicker.js"></script>

        <!-- mdp demo code -->
        <script type="text/javascript">
            <!--
                var latestMDPver = $.ui.multiDatesPicker.version;
            var lastMDPupdate = '2012-03-28';

            $(function() {
                // Version //
                //$('title').append(' v' + latestMDPver);
                $('.mdp-version').text('v' + latestMDPver);
                $('#mdp-title').attr('title', 'last update: ' + lastMDPupdate);

                // Documentation //
                $('i:contains(type)').attr('title', '[Optional] accepted values are: "allowed" [default]; "disabled".');
                $('i:contains(format)').attr('title', '[Optional] accepted values are: "string" [default]; "object".');
                $('#how-to h4').each(function() {
                    var a = $(this).closest('li').attr('id');
                    $(this).wrap('<' + 'a href="#' + a + '"></' + 'a>');
                });
                $('#demos .demo').each(function() {
                    var id = $(this).find('.box').attr('id') + '-demo';
                    $(this).attr('id', id)
                            .find('h3').wrapInner('<' + 'a href="#' + id + '"></' + 'a>');
                });

                // Run Demos
                $('.demo .code').each(function() {
                    eval($(this).attr('title', 'NEW: edit this code and test it!').text());
                    this.contentEditable = true;
                }).focus(function() {
                    if (!$(this).next().hasClass('test'))
                        $(this)
                                .after('<button class="test">test</button>')
                                .next('.test').click(function() {
                            $(this).closest('.demo').find('.box').removeClass('hasDatepicker').empty();
                            eval($(this).prev().text());
                            $(this).remove();
                        });
                });
            });
            // -->
        </script>
        <!-- loads some utilities (not needed for your developments) -->
        <link rel="stylesheet" type="text/css" href="css/mdp.css">
        <link rel="stylesheet" type="text/css" href="css/prettify.css">
    
  <ul id="demos-list">
            <li class="demo first">
                <h3>Simplest usage</h3>
                <div id="simpliest-usage" class="box"></div>

                <div class="code-box">
                    <h4>Code used</h4>
                    <pre class="code prettyprint">
                               $('#simpliest-usage').multiDatesPicker();
                    </pre>
                </div>
            </li>
    </ul>

